<template>
	<div>
		<div class="list_item" @click="godetail(list.itemData.id)">
			<p :class="{snp1:list.type == 1}">{{ list.itemData.title }}</p>
			<span :class="{snp2:list.type == 1}">
				{{ list.itemData.content }}
			</span>
			<slot name="card_img"></slot>
			<div>
				<li>
					<img class="user_img" src="../../../assets/home/top-icon1.png" alt="">
					<span>{{ list.itemData.author }}</span>
				</li>
				<span>{{ list.itemData.add_time }}</span>
			</div>
		</div>
		<div v-show="list.type == 2" class="comment">
			<textarea v-model="uContent" placeholder="请输入评论内容"></textarea>
			<div>
				<el-upload v-model:file-list="fileList" action="http://kaoshiguanli.haimijiaoyu.com/api/common/upload"
                    :data="{type:'image'}" list-type="picture-card"
					:on-preview="handlePictureCardPreview" :on-remove="handleRemove" :limit="3" >
					添加图片
				</el-upload>
			</div>
			<button @click="submit">发布评论</button>
		</div>
	</div>
</template>

<script setup lang="ts">
import axios from 'axios'
import { ZoomIn } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ref } from 'vue'
import {
	useRouter
} from 'vue-router'
const $myemit=defineEmits(['addComment','lookImg'])
const router = useRouter()
const uContent = ref('')
const list = defineProps({
	type: Number,
	itemData:Object
})
const godetail = (id) => {
	console.log(id)
	if (list.type == 1) {
		router.push({
			path: '/spaceDtaild',
			query: {id}
		})
	}

}
const fileList = ref<UploadUserFile[]>([])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
	console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
	$myemit('lookImg',uploadFile.url!)
}

const submit = () => {
	var imgList = []
    fileList.value.forEach(element => {
        imgList.push(element.response.data.video_url)
    });

	
	var data = {
		article_id:list.itemData.id,
		username:localStorage.getItem('username'),
		content:uContent.value,
		art_img_more:imgList.join(','),
		pid:'0'
	}
	if (!data.content) {
		ElMessage.error('请输入评论内容！')
		return
	}
	axios({
			url:'/Article/comment_add',
			baseURL:'http://kaoshiguanli.haimijiaoyu.com/api/',
			method:'post',
            data
		}).then(res=> {
			ElMessage({
                message: '评论成功',
                type: 'success',
            })
			uContent.value = ''
			fileList.value = []
            $myemit('addComment',true)
		})
}

</script>

<style lang="scss" scoped>
@media screen and (min-width:1200px) {
	.list_item {
		width: 1000px;
		min-height: 168px;
		padding: 20px;
		margin-bottom: 20px;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03);
		border-radius: 10px 10px 10px 10px;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		p {
			width: 960px;
			font-size: 18px;
			font-weight: 600;
			color: #333333;
			word-wrap: break-word;
		}

		span {
			width: 960px;
			font-size: 14px;
			font-weight: 400;
			color: #666666;
			margin: 20px 0;
			word-wrap: break-word;
		}

		div {
			width: 960px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			span {
				width: auto;
			}

			li {
				display: flex;
				align-items: center;

				.user_img {
					width: 30px;
					height: 30px;
					margin-right: 10px;
				}
			}
		}

	}
	

	.comment {
		width: 1000px;
		min-height: 140px;
		background: #F3FCFF;
		border-radius: 10px 10px 10px 10px;
		padding: 15px 15px 60px 15px;
		position: relative;

		textarea {
			width: 960px;
			background-color: rgba(0, 0, 0, 0);
			font-size: 14px;
			font-weight: 400;
			color: #666666;
			line-height: 40px;
			min-height: 100px;
			// padding: 10px;
			overflow: hidden;
			// resize:none;
			border: none;
			outline: medium;
			margin-bottom: 15px;
		}

		button {
			width: 116px;
			height: 35px;
			background: #FF9933;
			border-radius: 35px;
			position: absolute;
			bottom: 15px;
			right: 15px;
			border: none;
			font-size: 14px;
			font-weight: 600;
			color: #FFFFFF;
		}

		:deep(.el-upload-list--picture-card)  {
			margin-left: 18px;
			
		}
		:deep(.el-upload-list__item),
		:deep(.el-upload--picture-card){
			width: 100px;
			height: 100px;
		}
	}
}

@media screen and (max-width: 1200px) {
	.list_item {
		width: 95vw;
		min-height: 22.4vw;
		padding: 3vw;
		margin-bottom: 3vw;
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.03);
		border-radius: 1.2vw;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		p {
			width: 89vw;
			font-size: 2.4vw;
			font-weight: 600;
			color: #333333;
		}

		span {
			width: 89vw;
			font-size: 1.6vw;
			font-weight: 400;
			color: #666666;
			margin: 3vw 0 0 0;
		}

		div {
			width: 89vw;
			display: flex;
			align-items: center;
			justify-content: space-between;

			span {
				width: auto;
			}

			li {
				display: flex;
				align-items: center;

				.user_img {
					width: 4vw;
					height: 4vw;
					margin-right: 1.2vw;
				}
			}
		}

	}

	.comment {
		width: 95vw;
		min-height: 18vw;
		background: #F3FCFF;
		border-radius: 1.3vw;
		padding: 2vw 2vw 13vw 2vw;
		position: relative;
		display: flex;
		flex-direction: column;

		// align-items: center;
		textarea {
			width: 90vw;
			background-color: rgba(0, 0, 0, 0);
			font-size: 1.8vw;
			font-weight: 400;
			color: #666666;
			line-height: 4vw;
			min-height: 18vw;
			overflow: hidden;
			border: none;
			outline: medium;
			margin-bottom: 2vw;
			padding-top: 2vw;
		}

		button {
			// width: 16vw;
			padding: 1vw 3vw;
			background: #FF9933;
			border-radius: 35px;
			position: absolute;
			bottom: 2vw;
			right: 2vw;
			border: none;
			font-size: 14px;
			font-weight: 600;
			color: #FFFFFF;
		}

		:deep(.el-upload-list--picture-card)  {

			li,
			div {
				width: 15vw;
				height: 15vw;
				margin: 0 2vw 2vw 0;
				font-size: 1vw;
			}
		}
	}
}
</style>